<template>
    <el-card  v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <template #header>
            <span>大纲管理 </span>
            <el-button size="mini" type="primary" @click="add(0)">添加顶级大纲</el-button>
        </template>
         <el-tree :data="outlines" :props="props">
            <template #default="{data}">
                <div>
                    <span>{{data.outline_name}}</span>
                    <el-button type="text" @click="del(data.id)" size="mini">删除</el-button>
                    <el-button type="text" @click="add(data.id)" size="mini">添加</el-button>
                    <el-button type="text" @click="edit(data.id)" size="mini">编辑</el-button>

                     <el-button type="text" @click="sort(data.id,'up')" icon="el-icon-arrow-up" circle></el-button>
                    <el-button type="text" @click="sort(data.id,'down')" icon="el-icon-arrow-down" circle></el-button>
                    <el-switch @change="changeStatus(data.id,$event)" active-value="1" inactive-value="0" v-model="data.status">
                    </el-switch>
                </div> 
            </template>
        </el-tree>
    </el-card>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      outlines: [],
      props: {
        children: "children",
        label: "outline_name"
      }
    };
  },
  created() {
    this.getOutlines();
  },
  methods: {
    async getOutlines() {
      this.loading = true;
      const { data: { data } } = await this.axios({
        method: "get",
        url: "/outlines"
      });
      this.outlines = data;
      this.loading = false;
    },
    async sort(id, dir) {
      this.loading = true;
      this.axios({
        method: "put",
        url: `/outlines/sort/${id}/${dir}`
      });
      this.getOutlines();
      this.$root.$emit("changeStatus");
      this.loading = false;
    },
    async changeStatus(id, e) {
      this.loading = true;
      this.axios({
        method: "put",
        url: `/outlines/edit/${id}`,
        data: {
          status: e
        }
      });

      //根对象触发changeStatus事件
      this.$root.$emit("changeStatus");
      this.loading = false;
    },
    async del(id) {
      await this.$confirm("确认删除吗？删除后将不能恢复", "提示");
      this.loading = true;
      const data = await this.axios({
        method: "delete",
        url: `/outlines/del/${id}`
      }).catch(result => {
        this.loading = false;
        this.$message.error("请先删除子级菜单");
      });
      if (!data) {
        return;
      }
      this.$message.success("删除成功");
      this.loading = false;
      this.getOutlines();
    },
    edit(id) {
      this.$router.push({
        name: "HomeOutlinesEdit",
        params: {
          id
        }
      });
    },
    add(id) {
      this.$router.push({
        name: "HomeOutlinesAdd",
        params: {
          id
        }
      });
    }
  }
};
</script>

